* {
	padding: 0;
	margin: 0;
}

body {
	background-color: #eee;

	.container {
		width: 960px;
		height: 450px;
		margin: 60px auto;
		position: relative;

		img {
			position: absolute;
			padding: 10px 10px 15px;
			background: #fff;
			border: 1px solid #ddd;
			transition: 1s;
			z-index: 1;

			&:hover {
				transform: rotate(0deg);
				transform: scale(1.1);
				box-shadow: 5px 5px 5px #dddddd;
				z-index: 2;
				cursor: pointer;
			}
		}

		.pic1 {
			top: -50px;
			left: 400px;
			transform: rotate(-5deg);
		}

		.pic2 {
			top: 0;
			left: 600px;
			transform: rotate(-20deg);
		}

		.pic3 {
			bottom: 0;
			right: 0;
			transform: rotate(5deg);
		}

		.pic4 {
			top: 350px;
			left: 300px;
			transform: rotate(-10deg);
		}

		.pic5 {
			bottom: 0;
			left: 500px;
			transform: rotate(-10deg);
		}

		.pic6 {
			top: 0;
			left: 0;
			transform: rotate(10deg);
		}

		.pic7 {
			top: 100px;
			left: 750px;
			transform: rotate(20deg);
		}

		.pic8 {
			bottom: -20px;
			right: 700px;
			transform: rotate(5deg);
		}

		.pic9 {
			top: 90px;
			left: 130px;
			transform: rotate(15deg);
		}

		.pic10 {
			left: 320px;
			top: 120px;
			transform: rotate(7deg);
		}
	}
}

.wrap-photos img {
	opacity: 0;
	animation: opacity 2s forwards;
}

@keyframes opacity {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
